<template>
  <div class="pr ">
    <div id="navleft"></div>
    <div class="shape-wrap">
      <div class="b-shape-1">
        <img src="/imgs/shape-1.png" alt="">
      </div>
      <div class="b-shape-2">
        <img src="/imgs/shape-2.png" alt="">
      </div>
      <div class="b-shape-3">
        <img src="/imgs/shape-3.png" alt="">
      </div>
      <div class="b-shape-4">
        <img src="/imgs/shape-4.png" alt="">
      </div>
    </div>
    <div id="nav">
      <div class="app_router" style="flex: 1 1 0%;">
        <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
          <div class="home app_router" style="flex: 1 1 0%;">
            <div class="loginView mainContent">
              <div class="login_title_content"></div>
              <div class="loginTitle center">
                <div class="loginActive"> 密码登录</div>
                <div class="split"></div>
                <div class=""><nuxt-link to="/loginpwd">微信登录</nuxt-link></div>
              </div>
              <div>
                <form>
                  <div class="inputView"><input type="text" name="username"
                                                autocomplete="username"
                                                v-model.trim="userLogin.telephone"
                                                class="phoneView margin-bottom-32"
                                                placeholder="请输入手机，昵称，账号"
                                                maxlength="60"
                                                id="tel"
                  ></div>
                  <div class="inputView passView pr">
                    <input autocomplete="current-password"
                           name="password" placeholder="输入6-16位密码"
                           id="pwd"
                           class="phoneView" :type="lookpwd?'password':'text'"
                           v-model.trim="userLogin.password"
                           maxlength="16">
                    <img
                        class="check" src="/imgs/seePass.svg" @click="seePwd()">
                    <div class="c9999 fz12 fb" style="position: absolute;z-index: 10;top:14px;right:50px;">
                      <nuxt-link to="/forget" class="chakra-button css-e0fe2o">忘记密码?</nuxt-link>
                    </div>
                  </div>

                  <div v-if="errorCount >= 3" class="inputView" style="margin-top: 25px"><input
                      autocomplete="current-password"
                      placeholder="请输入验证码"
                      id="code"
                      class="phoneView" type="text"
                      v-model="userLogin.verifyCode"
                      maxlength="4">
                    <img :src="base64ImgRef" alt="点击更换" title="点击更换" @click="handleLoadCaptcha"
                         style="position: absolute;right:5px;top:6px;">
                  </div>
                  <div class="loginButton center" @click="handleLogin"> 登录</div>
                </form>
              </div>
              <div class="thirdLogin center">
                <span class="des-span">登录或注册即同意
                  <a target="_blank" href="/page/yinsi.html">《隐私政策》</a>与
                  <a target="_blank" href="/page/userxieyi.html">《用户服务协议》</a>
                </span>
              </div>
              <div class="mt-5 text-center">
                <nuxt-link class="chakra-link css-lro7a1 fz12 c999" to="/register">还没有账号，前往注册 &gt;</nuxt-link>
              </div>
              <div class="open_wx_btn center login-btn" style="display: none">
                <img class="svg-icon ic-wechat" src="/imgs/weixin.png"/>
                <img class="svg-icon ic-wechat" src="/imgs/qq.png"/>
              </div>
            </div>
            <div class="wx_code_box" style="display: none;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
useHead({title: '登录'})
const route = useRoute()
// 图片验证码接受
const base64ImgRef = ref("")
// 错误计数器 --用于监听登录出错的次数
const errorCount = ref(0)
const lookpwd = ref(true)
// 定义用户登录对象
const userLogin = ref({
  telephone: "15074816437",
  password: "123456",
  captchaId: "",
  errorCount: "",
  verifyCode: ""
})

const seePwd = ()=>{
  lookpwd.value = !lookpwd.value;
}

// 加载验证码
const handleLoadCaptcha = debounce(async () => {
  const resp = await useLoadCaptchaApi()
  const {base64Img, captchaId} = resp.data
  base64ImgRef.value = base64Img
  userLogin.value.captchaId = captchaId
}, 30)

// 登录的具体逻辑
const handleLogin = debounce(async () => {
  try {
    if (!userLogin.value.telephone) {
      useMessage().error("请输入账号")
      getDom("tel").focus()
      return;
    }

    if (!userLogin.value.password) {
      useMessage().error("请输入密码")
      getDom("pwd").focus()
      return;
    }

    if (!userLogin.value.verifyCode && errorCount.value >= 3) {
      useMessage().error("请输入验证码")
      getDom("code").focus()
      return;
    }

    useLoading().start()
    // 发起异步请求
    const params = {...userLogin.value}
    // 登录服务请求
    const resp = await useLoginApi(params)
    // 写入token到cookie中
    useCache("TOKEN").setCache(resp.data.uuid)
    // 把用户信息存放于pinia状态管理
    const userStore = useStore.userState()
    userStore.setLoginUserInfo({...resp.data})
    // 放入到缓存中
    useLoading().finish()
    useMessage().success("欢迎回到学习512大家庭，继续学习!")
    // 登录成功返回首页
    navigateTo(route.query.from || "/", {replace: true})
  } catch (e) {
    useLoading().finish()
    useMessage().error(e.message)
    // 找不到用户信息 或者 账号或者密码有误
    if (e.code == 601) {
      // 把服务端错误计算器要获取到。用户输错三次激活验证码
      if (errorCount.value < 3) {
        errorCount.value = e.data
      }
      handleLoadCaptcha()
      userLogin.value.password = ""
      userLogin.value.verifyCode = ""
      getDom("pwd").focus()
    }
    // 你输入的验证码有误
    if (e.code == 602) {
      handleLoadCaptcha()
      errorCount.value = 3
      userLogin.value.verifyCode = ""
      getDom("code").focus()
    }

    // 请输入验证码
    if (e.code == 603) {
      errorCount.value = 3
      getDom("code").focus()
    }

    // 拉黑提示
    if (e.code == 701) {
      errorCount.value = 3
      userLogin.value.password = ""
      userLogin.value.verifyCode = ""
      handleLoadCaptcha()
      getDom("code").focus()
    }
  }
}, 500)

// 监听错误计数器errorCount到达次数3次就显示验证码
watch(errorCount, (nval) => {
  if (nval >= 3) {
    userLogin.value.errorCount = nval
    handleLoadCaptcha()
  }
})

definePageMeta({
  layout: "login",
  middleware: ["md-repeat-login"]
})

</script>
<style scoped>


@-webkit-keyframes animationFramesOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
  }

  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
  }

  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
  }

  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
  }

  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
  }
}

@-webkit-keyframes animationFramesTwo {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1);
  }

  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg) scale(0.9);
  }

  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg) scale(1);
  }

  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg) scale(1.2);
  }

  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg) scale(1.1);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1);
  }
}

@keyframes animationFramesThree {
  0% {
    transform: translate(165px, -179px);
  }

  100% {
    transform: translate(-346px, 617px);
  }
}

@keyframes waveBtn {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .3)
  }
  50% {
    box-shadow: 0 0 0 40px transparent
  }
  100% {
    box-shadow: 0 0 0 0 transparent
  }
}

.app_router {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center
}

html {
  font-size: 100px
}

#navleft {
  position: absolute;
  left: 0;
  bottom: 215px;
  width: 100%;
  height: 100%;
  background: url(/imgs/left-shape.png) no-repeat left bottom;
}

#nav {
  background-image: url("/imgs/banner.png");
  background-size: cover;
  background-position: 467px;
  background-repeat: repeat-y;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center
}

.loginTitle {
  color: #2f2e3f;
  font-size: 32px;
  font-weight: 500
}

.loginTitle .split {
  margin: 0 16px
}

.loginTitle .loginActive {
  color: #2f2e3f
}

.margin-bottom-32 {
  margin-bottom: 25px
}

.open_wx_btn {
  background: #fff !important;
  color: #2f2e3f !important;
  border: 1px solid #e3e5e8;
  margin-top: 44px !important
}

.open_wx_btn.login-btn {
  border: initial !important
}

.open_wx_btn.login-btn:active, .open_wx_btn.login-btn:hover {
  background: initial !important
}

.open_wx_btn .svg-icon {
  cursor: pointer
}

.open_wx_btn .ic-wechat {
  margin: 0 22px
}

.open_wx_btn:hover {
  background: #f6f6f7 !important
}

.open_wx_btn:active {
  background: #edeeee !important
}

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
  -webkit-appearance: none
}

input[type=number] {
  -moz-appearance: textfield
}

.mainContent {
  width: 295px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center
}

.loginButton {
  width: 320px;
  height: 56px;
  background: #2878ff;
  border-radius: 32px;
  margin-top: 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer
}

.loginButton:hover {
  background: #3d85ff
}

.loginButton:active {
  background: #246ce6
}

.thirdLogin {
  margin-top: 32px;
  position: relative
}

.thirdLogin .line {
  height: 1px;
  background: #f1f2f4;
  width: 320px;
  position: absolute
}

.thirdLogin .text {
  width: 98px;
  height: 100%;
  font-weight: 500;
  font-size: 14px;
  color: rgba(47, 46, 63, .45);
  background: #fff;
  z-index: 1
}

.phoneView {
  width: 320px;
  background: #fff;
  border: 1px solid #e3e5e8;
  box-sizing: border-box;
  border-radius: 8px;
  height: 44px;
  padding: 11px 12px;
  display: flex
}

.phoneView::-moz-placeholder {
  font-size: 14px;
  color: rgba(47, 46, 63, .45);
  opacity: 1
}

.phoneView::placeholder {
  font-size: 14px;
  color: rgba(47, 46, 63, .45);
  opacity: 1
}

.phoneView:focus {
  background: rgba(40, 120, 255, .1) !important;
  border: 1px solid #2878ff !important;
  outline: none
}

.lanhuText .lanhuParent span {
  font-size: 14px
}

.inputView {
  overflow: hidden;
  position: relative
}

@-webkit-keyframes dialogFrame {
  0% {
    bottom: 0
  }
  to {
    bottom: 40px
  }
}

@keyframes dialogFrame {
  0% {
    bottom: 0
  }
  to {
    bottom: 40px
  }
}

.login_title_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.dd-qr-code .self-defined-dd iframe {
  border-radius: 12px
}

.dd-grey-toolbar .toolbar-content svg {
  margin-right: 9px
}

.dd-grey-toolbar .toolbar-content p {
  font-size: 14px;
  line-height: 14px;
  padding-top: 1px;
  font-weight: 400;
  letter-spacing: 0;
  color: #2f2e3f
}

.wx_login_registry .wx_code .wx_account_code img {
  width: 100%;
  height: 100%;
  border-radius: 12px 12px 12px 12px;
  border: 1px solid #f1f2f4
}

.home {
  display: flex;
  justify-content: center
}

.home .mainContent {
  width: 595px
}

.home .loginView input:-webkit-autofill {
  box-shadow: inset 0 0 0 1000px #fff !important
}

.home .loginView .passView {
  position: relative
}

.home .loginView .passView .check {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 28px;
  height: 28px;
  cursor: pointer
}

.home .loginView .loginTitle {
  font-size: 24px;
  font-weight: 500;
  color: rgba(47, 46, 63, .45);
  cursor: pointer;
  margin-bottom: 64px
}

.home .loginView .loginTitle .split {
  margin: 0 16px;
  width: 3px;
  height: 28px;
  position: relative;
  top: 2px;
  background: #e3e5e8
}

.home .loginView .loginTitle .loginActive {
  color: #2f2e3f;
  font-weight: bold;
}

.home .wx_code_box {
  position: absolute;
  background: #fff;
  top: 25%;
  left: 50%;
  text-align: center;
  width: 405px;
  height: 560px;
  margin-left: -202px;
  box-sizing: border-box;
  z-index: 3
}

.shape-wrap {
  position: absolute;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
}

.b-shape-1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 200px;
  margin: auto;
  text-align: center;
  animation: animationFramesOne 20s infinite linear;
}

.b-shape-2 {
  position: absolute;
  left: 140px;
  top: 45%;
  animation: animationFramesOne 20s infinite linear;
}

.b-shape-3 {
  position: absolute;
  left: 60px;
  top: 40%;
  animation: animationFramesThree 20s infinite linear;
}

.b-shape-4 {
  position: absolute;
  left: 60px;
  bottom: 80px;
  animation: animationFramesThree 20s infinite linear;
}
</style>